<style lang='less'>
	.scan-record-page {
		.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 300px;
		}
		.table-operate-area .el-button {
			margin-right: 1%;
		}
	}
</style>
<template>
	<div class="table-contain-inner scan-record-page">
		<div class="table-operate-area">
			<el-tooltip class="filter-item" effect="dark" content="只会导出当前筛选(排序)条件下的数据" placement="bottom-start">
				<el-button :disabled="record_data.length==0" type="primary" @click="exportToExcel" @touchend="exportToExcel" :loading="btn_loading_export">
					<i style="margin-right: 6%;" class="el-icon-document"></i>导出Excel
				</el-button>
			</el-tooltip>
		  <el-date-picker
		  	class="filter-item"
	      v-model="date"
	      type="daterange"
	      align="right"
	      unlink-panels
	      range-separator="至"
	      start-placeholder="起始日期"
	      end-placeholder="结束日期"
	      value-format="yyyy-MM-dd"
	      :picker-options="pickerOptions2">
	    </el-date-picker>
		</div>
		<el-table class="record-table" row-key="id" v-loading="tb_loading" @sort-change="sortChangeHandle" :data="parse_record_data">
			<el-table-column
	      label="工号"
	      min-width="100%"
	      prop="userIdNum">
	    </el-table-column>
	    <el-table-column
	      prop="user_name"
	      label="姓名">
	    </el-table-column>
	    <el-table-column
	    	min-width="100px"
	    	prop="salaryDate"
	    	sortable
	      label="日期">
	    </el-table-column>
	    <el-table-column v-for="record_key in record_keys"
	    	:key="record_key.idKey"
	    	min-width="100%"
	      :prop="'salaryData['+record_key.idKey+']'"
	      :label="record_key.label">
	    </el-table-column>
		</el-table>
		<el-pagination background :page-sizes="[5, 10, 20, 50]" :page-size.sync="page_size" layout="sizes, prev, pager, next" :pager-count="5" :page-count="page_total" :current-page.sync="page_no"></el-pagination>
	</div>
</template>
<script>
	import editRecord from 'components/admin/edit_record.vue';
	import { exportExcel } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				record_data: [],
				tb_loading: false,
				page_no: 1,
				page_total: 1,
				page_size: 10,

				filters: {},

				btn_loading_export: false,

				date: '',

				record_keys: [],
				pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
			}
		},
		watch: {
			date(val) {
				if(val) {
					this.filters.date_start = val[0];
					this.filters.date_end = val[1];
				}else {
					delete this.filters.date_start;
					delete this.filters.date_end;
				}
				this.reloadTb();
			},
			page_no() {
				this.getRecordData();
			},
			page_size() {
				this.reloadTb();
			}
		},
		computed: {
			parse_record_data() {
				return this.record_data.map(record => {
					try {
						record.salaryData = JSON.parse(record.salaryData);
					}catch(e) {
						record.salaryData = {}
					}
					return record;
				})
			}
		},
		methods: {
			exportToExcel() {
				this.btn_loading_export = true;
				this.$axios_blob.get('/user/exportRecord', this.filters).then(res => {
					if(res && res.data) {
						let sheet_des = res.headers['content-disposition'];
						exportExcel(res.data, sheet_des.substr(sheet_des.indexOf('filename=')+9));
		    		this.$message.success('导出成功');
					}
				}).finally(() => {
					this.btn_loading_export = false;
				})
			},
			getRecordData() {
				this.tb_loading = true;
				this.$axios.get('/user/getRecord/'+this.page_no+'/'+this.page_size, this.filters).then(res => {
					if(res.s == 1) {
						let res_data = res.d;
						this.page_total = res_data.page_count;
						this.record_data = res_data.list;
					}
				}).finally(() => {
					this.tb_loading = false;
				})
			},
			getRecordKeys() {
				this.$axios.get('/user/getSalaryKey').then(res => {
					if(res.s == 1) {
						this.record_keys = res.d;
					}
				})
			},
			sortChangeHandle({ order, prop }) {
				if(order && prop) {
					this.filters.order_by = 'salaryDate '+(order == 'ascending' ? 'asc' : 'desc');
				}else {
					delete this.filters.order_by;
				}
				this.reloadTb();
			},
			reloadTb() {
				if(this.page_no == 1) {
					this.getRecordData();
				}else {
					this.page_no = 1;
				}
			}
		},
		created() {
			this.getRecordKeys();
			this.getRecordData();
		}
	}
</script>